<template>
  <div class="home">
    <div class="top">
      <div class="topLeft">
        <!-- 上面 工单统计和销售额 -->
        <div class="top">
          <div class="leftUl">
            <div class="Statistics">
              <span style="font-size: 16px; font-weight: 700">工单统计</span>
              <span class="time">2023.04～2023.04.14</span>
            </div>

            <ul>
              <li>
                <p class="count">{{ total ? total : 0 }}</p>
                <p class="text">工单总数(个)</p>
              </li>
              <li>
                <p class="count">{{ workerCount ? workerCount : 0 }}</p>
                <p class="text">完成工单(个)</p>
              </li>
              <li>
                <p class="count">{{ progressTotal ? progressTotal : 0 }}</p>
                <p class="text">进行工单(个)</p>
              </li>
              <li>
                <p class="count">{{ cancelTotal ? cancelTotal : 0 }}</p>
                <p class="text">取消工单(个)</p>
              </li>
            </ul>
          </div>
          <div class="RightUl">
            <div class="Statistics">
              <span style="font-size: 16px; font-weight: 700">销售统计</span>
              <span class="time">2023.04～2023.04.14</span>
            </div>
            <ul>
              <li>
                <p class="sale">{{ saleCount }}</p>
                <p class="count">订单量(个)</p>
              </li>
              <!-- this.price.toFixed(2) -->
              <li>
                <p class="sale">{{ price.toFixed(2) }}</p>
                <p class="count">销售额(万元)</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 下方echarts -->
        <div class="EchartsBox">
          <div class="ETitle">
            <span class="ETitle-left">
              <span class="xs">销售数据</span>
              <span class="time">2023.01.01~{{ nowDate }}</span>
            </span>
            <span class="TBtn">
              <el-button
                type="text"
                class="span"
                :class="{ spanClick: classCount === 1 }"
                @click="weekFn(1)"
                >周</el-button
              >
              <el-button
                type="text"
                class="span"
                :class="{ spanClick: classCount === 2 }"
                @click="mountFn(2)"
                >月</el-button
              >
              <el-button
                type="text"
                class="span"
                :class="{ spanClick: classCount === 3 }"
                @click="yearFn(3)"
                >年</el-button
              >
            </span>
          </div>
          <!-- echarts 图表 -->
          <div class="ec">
            <div>
              <div id="tendency" ref="tendency">
                <div class="IMg">
                  <div class="imgBox">
                    <img
                      src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
                      alt=""
                    />
                  </div>
                  <span style="font-size: 12px">暂无数据</span>
                </div>
              </div>
            </div>
            <div>
              <div id="distribution" >
                <div class="IMg">
                  <div class="imgBox">
                    <img
                      src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
                      alt=""
                    />
                  </div>
                  <span style="font-size: 12px">暂无数据</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 排行 -->
      <div class="topRight" style="padding: 20px">
        <el-row type="flex" align="middle" class="title">
          <el-col :span="8"
            ><div class="bg-purple" style="font-size: 16px; font-weight: 700">
              商品热榜
            </div></el-col
          >
          <el-col :span="16"
            ><div
              class="bg-purple"
              style="font-size: 12px; color: #999; text-align: left"
            >
              2023.04.01~{{ this.nowDate }}
            </div></el-col
          >
        </el-row>
        <el-row
          v-for="(item, index) in goodsList"
          :key="index"
          class="item"
          :gutter="10"
        >
          <el-col :span="3"
            ><div
              :class="`top${index + 1}`"
              style="text-align: center; font-size: 12px"
            >
              {{ index + 1 }}
            </div></el-col
          >
          <el-col :span="14"
            ><div class="goodsClass">{{ item.skuName }}</div></el-col
          >
          <el-col :span="6"
            ><div class="goodsCount">{{ item.count }}单</div></el-col
          >
        </el-row>
      </div>
    </div>
    <div class="bottom">
      <div class="bLeft">
        <div class="Top-h">
          <span class="cooperation">合作商点位Top5</span>
          <span>
            <i class="el-icon-more" style="color: #5f84ff"></i>
          </span>
        </div>
        <div class="BOpie">
          <div class="bPie" id="Pie">
            <div>
              <div class="Img" style="margin:100px 0 0 -50px">
                <img
                  src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
                  alt=""
                />
                <span>暂无数据</span>
              </div>
            </div>
          </div>
          <div class="bPieCount">
            <div class="Count">
              <div>
                <h2>{{ value }}</h2>
                <p style="font-size:12px;margin-top:6px">点位数</p>
              </div>
              <div>
                <h2 style="font-size:24px;margin-top:20px">{{list.length}}</h2>
                <p style="font-size:12px;margin-top:6px">合作商数</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bRight">
        <div class="Top-h">
          <span class="cooperation">异常设备监控</span>
          <span>
            <i class="el-icon-more" style="color: #5f84ff"></i>
          </span>
        </div>
        <div class="showFalse">
          <div>
            <div class="Img">
              <img
                src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
                alt=""
              />
              <span>暂无数据</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  workOrderAPI,
  salesCount,
  salesPriceAPI,
  getTopGoodsAPI,
  getSaleCount as getSaleCountAPI,
  getSaleAreaCount as getSaleAreaCountAPI,
  getTopFive as getTopFiveAPI
} from '@/api/layout'
const dayjs = require('dayjs')
export default {
  data () {
    return {
      classCount: 0,
      total: 0,
      workerCount: 0,
      progressTotal: 0,
      cancelTotal: 0,
      saleCount: '',
      price: 0,
      nowDate: '',
      endDate: '',
      goodsList: [],
      xsList: [],
      that: null,
      lineShow: false,
      EaraSale: [],
      CountTeam: 0,
      list: [],
      value: 0
    }
  },
  async created () {
    this.getTime()
    // 获取订单
    const res = await workOrderAPI(`2023-04-01 00:00:00/${this.endDate}`)

    // 获取销售总量
    const sale = await salesCount({
      start: '2023-04-01 00:00:00',
      end: this.endDate
    })
    this.saleCount = sale
    this.total = 0
    res.forEach((item) => {
      this.total += item.total
      this.workerCount += item.workerCount
      this.progressTotal += item.progressTotal
      this.cancelTotal += item.cancelTotal
    })
    // 获取销售金额
    const price = await salesPriceAPI({
      start: '2023-04-01 00:00:00',
      end: this.endDate
    })
    console.log(price)
    this.price = price / 1000000
    console.log(this.price.toFixed(2))

    // 获取top10
    const goodsTop = await getTopGoodsAPI(`10/2023-04-01/${this.nowDate}`)
    // console.log(goodsTop)
    this.goodsList = goodsTop
    // echarts - 销售趋势
    const echartsSale = await getSaleCountAPI(`1/2023-04-10/${this.nowDate}`)
    this.xsList = echartsSale
    // echarts - 销售总额
    const echartsCoubt = await getSaleAreaCountAPI(
      `2023-04-10/${this.nowDate}`
    )
    this.EaraSale = echartsCoubt
    // console.log(this.xsList)
    this.$nextTick(() => {
      this.tendencyFn()
      this.distributionFn()
      this.Pie()
      this.PieFn()
    })
  },
  methods: {
    // 获取当前时间
    getTime () {
      // const nowTime = new Date()
      // console.log(nowTime)
      this.nowDate = dayjs().format('YYYY-MM-DD')
      this.endDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
      console.log(this.nowDate)
      console.log(this.endDate)
    },
    async weekFn (num) {
      this.classCount = num

      const x = []
      this.xsList.series.forEach((item) => {
        // console.log(item)
        x.push((item / 100).toFixed(2))
      })
      console.log(this.xsList.xAxis)
      // console.log(x)
      const myChart = echarts.init(document.getElementById('tendency'))
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          text: '销售额趋势图',
          left: '40%',
          textStyle: {
            fontSize: 14
          }
        },
        xAxis: [{
          type: 'category',
          data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
          // data: this.xsList.xAxis
        }],
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: x,
            type: 'line',
            smooth: true,
            itemStyle: {
              color: 'red'
            },
            areaStyle: {
              // 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#f7cac9' // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    async mountFn (num) {
      // console.log(num)
      this.classCount = num
      // echarts - 销售趋势
      const echartsSaleMount = await getSaleCountAPI(`1/2023-04-01/${this.nowDate}`)
      console.log(echartsSaleMount)
      const x = []
      echartsSaleMount.series.forEach((item) => {
        // console.log(item)
        x.push((item / 100).toFixed(2))
      })
      // this.xsList = echartsSale
      // echarts - 销售总额
      // const echartsCoubt = await getSaleAreaCountAPI(
      // `2023-04-01/${this.nowDate}`
      // )
      const myChart = echarts.init(document.getElementById('tendency'))
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          text: '销售额趋势图',
          left: '40%',
          textStyle: {
            fontSize: 14
          }
        },
        xAxis: [{
          type: 'category',
          // data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
          data: echartsSaleMount.xAxis
          // axisLabel: {
          //   interval: 2
          // }
        }],
        yAxis: {
          type: 'value',
          name: '单位：元',
          axisLabel: {
            interval: 2
          }
        },
        series: [
          {
            data: x,
            type: 'line',
            smooth: true,
            itemStyle: {
              color: 'red'
            },
            areaStyle: {
              // 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#f7cac9' // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    async yearFn (num) {
      this.classCount = num
      const echartsSaleMount = await getSaleCountAPI(`2/2023-01-01/${this.nowDate}`)
      const x = []
      console.log(echartsSaleMount)
      echartsSaleMount.series.forEach((item) => {
        x.push((item / 100).toFixed(2))
      })

      // 销售趋势
      const myChart = echarts.init(document.getElementById('tendency'))
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          text: '销售额趋势图',
          left: '40%',
          textStyle: {
            fontSize: 14
          }
        },
        xAxis: [{
          type: 'category',
          // data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
          data: echartsSaleMount.xAxis
          // axisLabel: {
          //   interval: 2
          // }
        }],
        yAxis: {
          type: 'value',
          name: '单位：元',
          axisLabel: {
            interval: 2
          }
        },
        series: [
          {
            data: x,
            type: 'line',
            smooth: true,
            itemStyle: {
              color: 'red'
            },
            areaStyle: {
              // 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#f7cac9' // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
      myChart.setOption(option)
      // 销售分捕
      // echarts - 销售总额
      const echartsCoubt = await getSaleAreaCountAPI(
      `2023-01-01/${this.nowDate}`
      )
      console.log(echartsCoubt)
      const myChart1 = echarts.init(document.getElementById('distribution'))
      const option1 = {
        title: {
          text: '销售额分布',
          left: '40%',
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '18%',
          containLabel: true

        },
        xAxis: {
          type: 'category',
          data: echartsCoubt.xAxis,
          axisLabel: {
            innerWidth: '4px',
            overflow: 'truncate',
            formatter: function (value) {
              if (value.length > 3) {
                return `${value.slice(0, 3)}...`
              }
              return value
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: echartsCoubt.series,
            type: 'bar',
            barWidth: '7%'

          }
        ]
      }
      myChart1.setOption(option1)
    },
    tendencyFn () {
      const x = []
      this.xsList.series.forEach((item) => {
        // console.log(item)
        x.push((item / 100).toFixed(2))
      })
      console.log(this.xsList.xAxis)
      // console.log(x)
      const myChart = echarts.init(document.getElementById('tendency'))
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          text: '销售额趋势图',
          left: '40%',
          textStyle: {
            fontSize: 14
          }
        },
        xAxis: [{
          type: 'category',
          // data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

          data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']

        }],
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: x,
            type: 'line',
            smooth: true,
            itemStyle: {
              color: 'red'
            },
            areaStyle: {
              // 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#f7cac9' // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    distributionFn () {
      console.log(this.EaraSale)
      // const data = this.EaraSale.series.map(item => item / 100)
      const myChart = echarts.init(document.getElementById('distribution'))
      const option = {
        title: {
          text: '销售额分布',
          left: '40%',
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '18%',
          containLabel: true

        },
        xAxis: {
          type: 'category',
          data: this.EaraSale.xAxis,
          axisLabel: {
            innerWidth: '4px',
            overflow: 'truncate',
            formatter: function (value) {
              if (value.length > 3) {
                return `${value.slice(0, 3)}...`
              }
              return value
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: this.EaraSale.series,
            type: 'bar',
            barWidth: '7%'

          }
        ]
      }
      myChart.setOption(option)
    },
    Pie (data) {
      const myChart = echarts.init(document.getElementById('Pie'))
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          show: true
        },
        series: [
          {
            type: 'pie',
            radius: [30, 80],
            // center: ['50%', '50%'],
            roseType: 'radius',
            // itemStyle: {
            //   borderRadius: 0
            // },
            data: data,
            label: {
              formatter: '{b} {d}%'
            }

          }
        ]
      }
      myChart.setOption(option)
    },
    async PieFn () {
      const res = await getTopFiveAPI()
      console.log(res)
      this.Pie(res)
      // this.CountTeam =
      // const value = res.value
      // console.log(value)
      // const value =
      this.list = res
      console.log(this.list)
      this.value = this.list.reduce((pre, item) => pre + item.value, 0)
      // console.log(value)
    }
  },
  mounted () {
    // this.tendencyFn()
    this.distributionFn()
    this.$nextTick(() => {
      if (this.classCount === 2) {
        this.mountFn()
        this.$router.go(0)
      }
    })
  },
  watch: {
    classCount (val) {
      this.$nextTick(() => {
        console.log(val)
        if (val === 1) {
          this.weekFn(val)
        } else if (val === 2) {
          this.mountFn(val)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
* {
  list-style: none;
}
.home {
  width: 1273px;
  height: 950px;
  background-color: #f8fafd;
}
.top {
  width: 1240px;
  height: 535px;
  // background-color: red;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
}
.topLeft {
  width: 940px;
  display: inline-block;
  height: 535px;
  // background-color: aqua;
  padding: 0 10px 0 0;
  .top {
    width: 100%;
    height: 166px;
    .leftUl {
      box-sizing: border-box;
      width: 503px;
      height: 100%;
      background-color: blue;
      border-radius: 15px;
      padding: 20px;
      background: #e9f3ff;
      background-image: url(),
        url(https://likede2-admin.itheima.net/img/task.66b715b7.png);
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, calc(100% - 12px) 100%;
      .Statistics {
        text-align: left;
        .time {
          font-size: 12px;
          color: #999;
          margin-left: 10px;
        }
      }
      ul {
        display: flex;
        height: 100%;
        // line-height: 50px;
        align-items: center;
        li {
          flex: 1;
          // background-color: aqua;
          padding: 0 10px;
          .count {
            width: 84px;
            height: 50px;
            line-height: 50px;
            // background-color: brown;
            font-size: 36px;
            font-weight: 700;
            color: #072074;
            text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
            text-align: left;
            font-family: PingFangSC-Semibold, PingFang SC;
          }
          .text {
            margin: 4px 0;
            color: #91a7dc;
            font-size: 12px;
            text-align: left;
          }
        }
      }
    }
    .RightUl {
      // flex: 1;

      width: 350px;
      background: #fbefe8
        url(https://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
        calc(100% - 12px) 100%;

      border-radius: 15px;
      margin-right: 20px;
      padding: 20px;
      .Statistics {
        text-align: left;
        .time {
          font-size: 12px;
          color: #999;
          margin-left: 10px;
        }
      }
      ul {
        display: flex;
        align-items: center;
        height: 100%;
        li {
          flex: 1;
          padding: 0 50px;
          // background-color: firebrick;
          .sale {
            width: 90px;
            height: 50px;
            font-size: 36px;
            font-weight: 700;
            color: #ec635e;
            text-align: center;
            text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5);
          }
          .count {
            margin: 4px 0;
            padding-left: 5px;
            font-size: 12px;
            color: #de9690;
            text-align: left;
          }
        }
      }
    }
  }
  .EchartsBox {
    width: 917px;
    margin-left: 10px;
    margin-top: 10px;
    box-sizing: border-box;
    height: 352px;
    padding: 20px;
    background-color: #fff;
    border-radius: 15px;
    .ec {
      display: flex;
      position: relative;
      .IMg {
        position: absolute;
        top: 25%;
        left: 25%;
        transform: translate(-50%);

        // top: 0;
        // left: 0;
        // right: 0;
        // bottom: 0;
        margin: auto;
        .imgBox {
          width: 129px;
          height: 98px;
          margin: auto;

          img {
            display: inline-block;
            width: 100%;
          }
          span {
            display: inline-block;
          }
        }
      }
      div {
        box-sizing: border-box;
        flex: 1;
        height: 285px;
        // background-color: #fff;
        padding-top: 10px;
      }
    }
    // color: #e9f3ff;
    .ETitle {
      overflow: hidden;
      line-height: 34px;
      .ETitle-left {
        float: left;
        .xs {
          font-size: 16px;
          font-weight: 700;
        }
        .time {
          margin-left: 10px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999;
        }
      }
      .TBtn {
        float: right;
        width: 129px;
        height: 34px;
        background-color: #f8faff;
        border-radius: 9px;
        // line-height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        /deep/ .span {
          margin: 0;
          // flex: 1;
          box-sizing: border-box;
          display: inline-block;
          width: 37px;
          height: 25px;
          line-height: 25px;
          padding: 0;
          font-size: 14px;
          color: #9ca3b4;
          cursor: pointer;
          //  border-radius: 7px;
          //  background-color: #91a7dc;
        }
        /deep/ .spanClick {
          // flex: 1;
          box-sizing: border-box;
          display: inline-block;
          width: 37px;
          height: 25px;
          line-height: 25px;
          padding: 0;
          font-size: 14px;
          color: #333;
          cursor: pointer;
          border-radius: 7px;
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
          background-color: #ffffff;
        }
      }
    }
  }
}
.topRight {
  flex: 1;
  margin-top: 10px;
  padding: 0 10px;
  height: 100%;
  background-color: #ffffff;
  border-radius: 15px;
  box-sizing: border-box;
  .item {
    margin: 25px 0;
  }
  .goodsClass {
    font-size: 14px;
    text-align: left;
    font-weight: 700;
  }
  .goodsCount {
    font-size: 14px;
    text-align: right;
    color: #737589;
  }
}
.top1 {
  width: 21px;
  height: 20px;
  background: url();
  color: #8e5900;
}
.top2 {
  width: 21px;
  height: 20px;
  background: url();
  color: #494949;
}
.top3 {
  width: 21px;
  height: 20px;
  background: url();
  color: #cf6d3d;
}
.top4,
.top5,
.top6,
.top7,
.top8,
.top9,
.top10 {
  display: inline-block;
  width: 16px;
  height: 20px;
  background: url();
  color: #e9b499;
}
.bottom {
  margin: 20px 20px 0 20px;
  width: 1230px;
  height: 353px;
  // background-color: #ec635e;
  .bLeft {
    box-sizing: border-box;
    float: left;
    padding: 20px;
    width: 710px;
    height: 100%;
    background-color: #fff;
    border-radius: 15px;
  }
  .bRight {
    box-sizing: border-box;
    padding: 20px;
    float: right;
    // margin-left: 20px;
    width: 502px;
    height: 100%;
    background-color: #fff;
    border-radius: 15px;
    .Top-h {
      width: 100%;
      height: 34px;
      line-height: 34px;
    }
  }
}
.Top-h {
  color: #333;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  height: 20px;
  line-height: 20px;
  // background-color: #072074;
  display: flex;
  justify-content: space-between;
}
.BOpie {
  width: 100%;
  height: 100%;
  // background-color: #737589;
}
.bPie {
  width: 389px;
  height: 285px;
  float: left;
  padding: 0 40px;
}
.bPieCount {
  float: right;
}
#Pie {
  padding: 0 40px;
}
.Count {
  box-sizing: border-box;
  text-align: left;
  width: 154px;
  height: 230px;
  padding-top: 47px;
  padding-left: 38px;
  margin-top: 47px;
  background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
    linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
    linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
    linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  h2 {
    height: 33px;
    font-size: 24px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    color: #072074;
    line-height: 33px;
  }
}
.showFalse {
  position: relative;
  top: 30%;
  left: -10%;
}
.Img {
  position: absolute;
  display: inline-block;
  width: 123px;
  height: 96px;
}
</style>
